<template>
  <div class="operation">
    <div class="operation-search">
      <a-form layout="inline">
        <a-form-item label="创建时间">
          <a-range-picker
            format="YYYY-MM-DD"
            @change="onTime"
            v-model="defaulttimeList"
          >
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" :style="getcurrentStyle(current)">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-item>
        <a-form-item label="设备编号">
          <a-input v-model="searchItem.ProSegmentNo" />
        </a-form-item>
        <a-form-item label="资产编号">
          <a-input v-model="searchItem.ProSegmentAssetNo" />
        </a-form-item>
        <a-form-item label="设备状态">
          <a-select
            :allowClear="true"
            mode="multiple"
            v-model="searchItem.ProSegmentStatus"
            style="width: 150px"
          >
            <a-select-option
              v-for="item in proSegmentStatusList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="设备类别">
          <a-select
            :allowClear="true"
            mode="multiple"
            v-model="searchItem.ProSegmentType"
            style="width: 150px"
          >
            <a-select-option
              v-for="item in proSegmentTypeList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="清洗管控">
          <a-select
            :allowClear="true"
            v-model="searchItem.IsControl"
            style="width: 150px"
          >
            <a-select-option
              v-for="item in isControlList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="设备类型">
          <a-select
            :allowClear="true"
            mode="multiple"
            v-model="searchItem.ProSegmentTypeIDs"
            style="width: 150px"
          >
            <a-select-option
              v-for="item in proSegmentTypeNetList"
              :key="item.ProSegmentTypeID"
              :value="item.ProSegmentTypeID"
            >
              {{ item.ProSegmentTypeName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button class="default-button" @click="searchTableFun">
            查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <general-button
            @operation="addProSegmentFun"
            btn-text="新增"
            btnPowerNum="1FFE1A59-8339-46D0-B7F5-BC103BE21657"
          ></general-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="table-box">
      <a-table
        className="components-table-demo-nested"
        :columns="columns"
        :row-key="(record) => record.ProSegmentID"
        :data-source="showTableList"
        :loading="loading"
        :scroll="{ y: procedurescrollY, x: 4200 }"
        @change="handleTableChange"
        :pagination="false"
        size="middle"
      >
        <template slot="IsControl" slot-scope="text, record">
          <a-checkbox disabled v-model="record.IsControl"></a-checkbox>
        </template>
        <template slot="IsMultiSystem" slot-scope="text, record">
          <a-checkbox disabled v-model="record.IsMultiSystem"></a-checkbox>
        </template>
        <template slot="IsDisable" slot-scope="text, record">
          <a-checkbox disabled v-model="record.IsDisable"></a-checkbox>
        </template>
        <template slot="action" slot-scope="text, record">
          <div class="chart-manage">
            <a-icon
              type="edit"
              class="icon-class"
              style="margin-right: 10px"
              @click="editProSegmentFun(record)"
            />

            <a-icon
              type="printer"
              class="icon-class"
              style="margin-right: 10px"
              @click="printProSegmentFun(record)"
            />
            <a-icon
              type="delete"
              class="icon-class"
              @click="cancelProSegmentFun(record)"
            />
          </div>
        </template>
      </a-table>
      <footer class="table-paging">
        <a-pagination
          v-model="searchItem.pageRequestModel.pageIndex"
          show-size-changer
          :default-current="1"
          :page-size.sync="searchItem.pageRequestModel.pageSize"
          :total="tableTotal"
          @change="tableChange"
          @showSizeChange="tablehowsizeChange"
        />
      </footer>
    </div>
    <pro-segment-model
      :show.sync="segmentModelShow"
      :item="segmentForm"
      :is-edit="segmentEdit"
      :pro-segment-type-list="proSegmentTypeList"
      :is-control-list="isControlList"
      :pro-segment-status-list="proSegmentStatusList"
      :pro-segment-type-net-list="proSegmentTypeNetList"
      :ws-type-list="WSTypeList"
      @updata="searchTableFun"
    ></pro-segment-model>
  </div>
</template>

<script>
import moment from "moment";
import { getTableScroll } from "@/common/table-calc";
import { getConfig, delConfig } from "@/api/ConfigApi";
import GeneralButton from "@/components/be-current-btn.vue";
import ProSegmentModel from "./children/proSegmentModel.vue";
import { GetWorkShopTypesAll } from "@/api/WorkShopType/index";

import {
  getProSegmentTypeList,
  getProSegmentList,
  disProSegment,
} from "@/api/ProSegmentType/index";
//配置信息列表
const columns = [
  {
    title: "序号",
    dataIndex: "num",
    align: "center",
    width: "150",
    fixed: "left",
  },
  {
    title: "设备编码",
    dataIndex: "ProSegmentNo",
    width: "150",
    align: "center",
    fixed: "left",
  },

  {
    title: "资产编号",
    dataIndex: "ProSegmentAssetNo",
    width: "150",
    align: "center",
  },
  {
    title: "设备名称",
    dataIndex: "ProSegmentName",
    width: "150",
    align: "center",
  },
  {
    title: "设备描述",
    dataIndex: "ProSegmentRemark",
    width: "150",
    align: "center",
  },
  {
    title: "设备条码",
    dataIndex: "ProSegmentBarcode",
    width: "150",
    align: "center",
  },
  {
    title: "设备状态",
    dataIndex: "ProSegmentStatusDesc",
    width: "150",
    align: "center",
  },
  {
    title: "设备类型",
    dataIndex: "ProSegmentTypeName",
    width: "150",
    align: "center",
  },
  {
    title: "设备类别",
    dataIndex: "ProSegmentTypeCode",
    width: "150",
    align: "center",
  },
  {
    title: "是否清洗管控",
    dataIndex: "IsControl",
    key: "IsControl",
    ellipsis: true,
    width: "150",
    align: "center",
    scopedSlots: { customRender: "IsControl" },
  },
  {
    title: "是否多灌液系统",
    dataIndex: "IsMultiSystem",
    key: "IsMultiSystem",
    ellipsis: true,
    width: "150",
    align: "center",
    scopedSlots: { customRender: "IsMultiSystem" },
  },
  {
    title: "清洗有效时长",
    dataIndex: "ValidityTime",
    width: "150",
    align: "center",
  },

  {
    title: "厂区类别",
    dataIndex: "WSName",
    width: "150",
    align: "center",
  },
  {
    title: "车间标识",
    dataIndex: "SegmentName",
    width: "150",
    align: "center",
  },
  {
    title: "拉线标识",
    dataIndex: "ProductLineName",
    width: "150",
    align: "center",
  },
  {
    title: "清洗时长(分钟)",
    dataIndex: "CleanTime",
    width: "150",
    align: "center",
  },

  {
    title: "是否停用",
    dataIndex: "IsDisable",
    key: "IsDisable",
    width: "150",
    align: "center",
    ellipsis: true,
    scopedSlots: { customRender: "IsDisable" },
  },

  {
    title: "创建人",
    dataIndex: "CreateUserName",
    width: "150",
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "CreateDtName",
    width: "150",
    align: "center",
  },
  {
    title: "修改时间",
    dataIndex: "ModifyDtName",
    width: "150",
    align: "center",
  },
  {
    title: "修改人",
    dataIndex: "ModifyUserName",
    width: "150",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "100",
    align: "center",
    scopedSlots: { customRender: "action" },
    fixed: "right",
  },
];

export default {
  name: "ProSegment",
  components: {
    GeneralButton,
    ProSegmentModel,
  },
  data() {
    return {
      proSegmentTypeList: [
        { label: "泵", value: 1 },
        { label: "灌装机", value: 2 },
        { label: "包装机", value: 3 },
      ], //类别列表
      isControlList: [
        { label: "管控", value: 1 },
        { label: "不管控", value: 0 },
      ], //是否清洗管控
      proSegmentStatusList: [
        { label: "作废", value: 0 },
        { label: "待清洗", value: 1 },
        { label: "已清洗", value: 2 },
        { label: "正在使用", value: 3 },
        { label: "正在清洗", value: 4 },
        { label: "已清洗未审核", value: 5 },
      ], //状态列表
      proSegmentTypeNetList: [], //设备类型列表
      WSTypeList: [], //厂区列表
      /** 设备类型列表搜索 */
      listDataSearch: {
        pageRequestModel: { pageIndex: 1, pageSize: 500 },
        ProSegmentTypeName: null, //类型名称
        ProSegmentTypeStatus: "", //类型状态
      },
      procedureInfo: {}, //新增删除配置信息信息
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 20,
        },
        ProSegmentNo: "",
        ProSegmentAssetNo: "",
        ProSegmentStatus: [],
        ProSegmentType: [],
        IsControl: null,
        ProSegmentTypeIDs: [],
        CreateDt: "",
      }, //搜索
      defaulttimeList: [], //默认时间
      showTableList: [], //表格列表
      tableTotal: 0, //表格总条数
      segmentModelShow: false, //新增设备显示
      segmentForm: {}, //新增设备信息
      segmentEdit: false, //是否新增/修改设备信息
      procedureTotal: 0,
      loading: true, //表格loading
      columns, //配置信息列表表头
      procedurescrollY: 0, //动态计算表格高度
      procedureShow: false, //添加配置信息
      procedureisEdit: false, //判断是添加还是修改
      procedureData: [], //配置信息列表
    };
  },
  methods: {
    //时间选择器的样式填充
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    //时间选择
    onTime(e, e1) {
      let that = this;
      that.searchItem.StartDt = that.dateExt.showDate(e[0]._d);
      that.searchItem.EndDt = that.dateExt.showDate(e[1]._d);
    },

    /** 获取设备类型 */
    async getDataListFun() {
      try {
        let { Data } = await getProSegmentTypeList(this.listDataSearch);
        this.proSegmentTypeNetList = Data.Data;
      } catch (e) {
        this.$message.error(e);
      } finally {
        this.busy = false;
      }
    },

    /** 获取设备列表 */
    async getSegmentListFun() {
      try {
        let { Data } = await getProSegmentList(this.searchItem);
        this.tableTotal = Data.TotalNumber;
        this.showTableList = Data.Data;
        let { pageIndex, pageSize } = this.searchItem.pageRequestModel;

        this.showTableList.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.CreateDtName = item.CreateDt
            ? moment(item.CreateDt).format("YYYY-MM-DD HH:mm:ss")
            : "";
          item.ModifyDtName = item.ModifyDt
            ? moment(item.ModifyDt).format("YYYY-MM-DD HH:mm:ss")
            : "";
          item.ProSegmentTypeCode = item.ProSegmentType
            ? this.proSegmentTypeList.find(
                (o) => o.value === item.ProSegmentType
              ).label
            : "";
        });
      } catch (e) {
        this.$message.error(e);
      } finally {
        this.loading = false;
      }
    },

    //获取厂区列表
    async GetWorkShopTypesAllFun() {
      let that = this;
      let res = await GetWorkShopTypesAll(10);
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.WSType, name: item.WSName });
        });
        that.WSTypeList = wtList;
      } else {
        that.$message.error(res.Message);
      }
    },

    /** 新增设备信息 */
    addProSegmentFun() {
      this.segmentModelShow = true;
      this.segmentEdit = false;
      this.segmentForm = {
        ProSegmentStatus: 1,
        IsControl: true,
      };
    },
    /** 修改设备信息 */
    editProSegmentFun(item) {
      this.segmentModelShow = true;
      this.segmentEdit = true;
      this.segmentForm = JSON.parse(JSON.stringify(item));
    },
    /** 打印 */
    printProSegmentFun(item) {
      console.log(item);
      const newpage = this.$router.resolve({
        name: "printIndex", // 跳转的页面路由
        query: {
          // 要传的参数
          item: JSON.stringify(item),
        },
      });
      window.open(newpage.href, "_blank");
      // this.$router.push({ path: "/printIndex", params: { data:JSON.stringify(item) } });
    },
    /** 作废设备信息 */
    cancelProSegmentFun(item) {
      let that = this;
      this.$confirm({
        title: "提示",
        content: `作废【${item.ProSegmentName}(${item.ProSegmentAssetNo})】项`,
        async onOk() {
          try {
            let res = await disProSegment([item]);
            if (!res.Success) throw new Error(res.Message);
            that.$message.success("删除成功");
            that.getSegmentListFun();
          } catch (e) {
            that.$message.error(e.message);
          }
        },
        onCancel() {},
      });
    },
    /** 表格页数点击 */
    tableChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.getSegmentListFun();
    },
    /** 基础项条数选择 */
    tablehowsizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.getSegmentListFun();
    },

    /** 查询设备信息 */
    searchTableFun() {
      this.showTableList = [];
      this.searchItem.pageRequestModel.pageIndex = 1;
      this.searchItem.pageRequestModel.pageSize = 20;
      this.getSegmentListFun();
    },

    //点击表格行触发
    handleTableChange() {},
  },
  created() {
    let that = this;

    that.getDataListFun();
    that.getSegmentListFun();
    that.GetWorkShopTypesAllFun();
  },
};
</script>

<style lang="less" scoped>
.operation {
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .operation-search {
    display: flex;

    border-bottom: 2px solid #f0f2f5;
    margin-bottom: 0.9375rem;
  }
  .table-box {
    display: flex;
    flex-direction: column;
    height: calc(100% - 6.75rem);

    .ant-table-wrapper {
      flex: 3;
      overflow: auto !important;
    }

    .table-paging {
      margin: 0.3125rem 0;
      display: flex;
      justify-content: flex-end;
    }

    .extattrbute-table-box {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;

      .extattrbute-operation-search {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          font-weight: 700;
          margin-bottom: 0.3125rem;
        }
      }

      .ant-table-wrapper {
        flex: 3;
      }

      .table-paging {
        margin: 0.625rem 0;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
/deep/ .ant-table-body {
  min-height: 6.25rem !important;
}
/deep/.ant-form-item {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  margin-bottom: 10px;
  vertical-align: top;
}
</style>
